<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <div class="red box1">hello world</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div id="cont">4</div>
    <div id="cont">5</div>
    <div id="cont">6</div>
    <div class="msg">
        <div class="xbox">
            <h2>标题1</h2>
            <h2>标题2</h2>
        </div>
        <h2>标题3</h2>
        <h2>标题4</h2>
    </div>
    <p>段落1</p>
    <p style="display:none">段落2</p>
    <ul class="list">
        <li>html</li>
        <li> </li>
        <li>css</li>
        <li></li>
        <li class="red">javascript</li>
        <li>php</li>
        <li>mysql</li>
    </ul>
    <ul class="list">
        <li>html</li>
        <li> </li>
        <li>css</li>
        <li></li>
        <li>javascript</li>
        <li>php</li>
        <li>mysql</li>
    </ul>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password" abc="hahha">
    <input type="text" >
    <input type="text" name>
</body>
<script src="../jquery.js"></script>
<script>
    // $(".msg h2").css("background","red")
    // $(".msg").find("h2").css("background","red")

    // $(".msg>h2").css("background","red")
    // $(".msg").children("h2").css("background","red")

    // $(".list li:first").css("background","red")
    // $(".list").find("li").first().css("background","red")

    // $(".list li:last").css("background","red")
    // $(".list li").last().css("background","red")

    // $(".list li:eq(2)").css("background","red")
    // $(".list li").eq(3).css("background","red")

    // $(".list+span").css("background","red")
    // $(".list").next("span").css("background","red")

    // $(".list~span").css("background","red")
    // $(".list").nextAll("span").css("background","red")

    // $(".list li:not(.red)").css("background","red")
    // $(".list li").not(".red").css("background","red")

    // $(".list:has(.red)").css("border","solid 2px black")
    // $(".list").has(".red").css("border","solid 2px black")


</script>
</html>